<template>
  <div class="recipe_item" @click="goToRecipeView">
    <img :src="recipeObj.thumbnail" :alt="recipeObj.title" class="recipe_item__thumb">
    <div class="recipe_item__name">{{ recipeObj.title }}</div>
    {{ recipe.thumbnial }}
  </div>
</template>

<script>
export default {
  name: 'recipe',
  props: {
    recipe: {
      type: Object
    }
  },
  data () {
    return {
      recipeObj: this.recipe
    }
  },
  methods: {
    // 跳转到食谱文章页面
    goToRecipeView () {
      this.$router.push(`/article/${this.recipeObj.id}`)
    }
  },
  created () {}
}
</script>

<style lang="less" scoped>
.recipe_item{
  width:100%;
  height: 150px;
  box-sizing: border-box;
  border-radius: 10px;
  // overflow: hidden;
  .recipe_item__thumb{
    width:100%;
    height: 120px;
    box-sizing: border-box;
  }
  .recipe_item__name{
    display:flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
  }
}
</style>
